# Vue Dynamic Styling

# Special Syntax

:style and :class use a special syntax for binding: feed an Object.

Inside of this expression, this style object is all JavaScript. So we have to use camelCased unless we want to use ‘kebab-cased’ in quotes

recommended

:style="{ borderColor: 'red' }"

Vue takes that information and converts it into the code:style="{ borderColor: red }"

:style="{ 'border-color': 'red'}"

Disadvantage of inline-styles: they overwrite all other style -> usually avoid style and use class instead

:style="{ borderColor: conditionIsTrue ? 'red' : 'blue'}"

we can bind to an entire style object that lives within our data.

-> change inline-styling dynamically

<div :style="styles"></div>

//// 
data() { 
	return { 
		styles: { 
		color: 'red', 
		fontSize: '14px' }
	} 
}

-> class is conditionally added to existing classes if true

:class=" conditionIsTrue ? 'active' :'' "

nicer syntax

:class="{ active: conditionIsTrue }"

the class 'active' is added, if the condition is true

<li v-for="book in books" :class="{ fav: book.isFav }">

-> adds the class "fav" if book.isFav is true

<span :class="{ 'text-green-600 font-bold': entry.HasWon }">...</span>

Use in-line ternary operators to add different classes based upon a condition:

<div :class="{ isActive ? activeClass : '' }"></div>

you can use computed properties (esp. for more complicated logic):

  computed: {
    boxAClasses() {
      return { active: this.conditionIsTrue }
    },
  },

<div :class="boxAClasses"></div>

Alternative: pass an Array. esp for multiple classes

:class="['demo', {active: boxSelected}]"